"use client";

import React, { useState, useEffect } from "react";
import { Image } from "@nextui-org/image";
import "./globals.css";


export default function BottomFoot() {

  const links = [
    {
      key: 1,
      title: '产品',
      lists: [
        {
          key: '1-1',
          title: '下载',
          url: '/abc'
        },{
          key: '1-2',
          title: '价格',
          url: '/abc'
        },{
          key: '1-3',
          title: '开发平台',
          url: '/abc'
        },
      ]
    }, {
      key: 2,
      title: '解决方案',
      lists: [
        {
          key: '2-1',
          title: '敏捷研发',
          url: '/abc'
        },{
          key: '2-2',
          title: '电子商务',
          url: '/abc'
        },{
          key: '2-3',
          title: '项目管理',
          url: '/abc'
        },{
          key: '2-4',
          title: '市场营销',
          url: '/abc'
        },{
          key: '2-5',
          title: '人事行政',
          url: '/abc'
        },
      ]
    }, {
      key: 3,
      title: '帮助中心',
      lists: [
        {
          key: '3-1',
          title: '帮助手册',
          url: '/abc'
        },{
          key: '3-2',
          title: '视频学习中心',
          url: '/abc'
        },{
          key: '3-3',
          title: '协作星球',
          url: '/abc'
        },{
          key: '3-4',
          title: '更新日记',
          url: '/abc'
        },
      ]
    }
  ]
  
  return (
    <div className="grid grid-cols-5 py-20 px-80 font-sans text-slate-500 -mt-50 footer">
      <div className="flex justify-start justify-items-center items-start content-start flex-col">
        {/* <Image width={50} alt="优天辰logo" src="/ytc-logo.png" /> */}
        <Image width={50} alt="Tasks logo" src="/tasks-logo.png" />
      </div>
      
      {links.map(item => (
        <div key={item.key} className="flex justify-start justify-items-center items-start content-start flex-col">
          <div className="flex justify-items-start text-lg mb-6">
            {item.title}
          </div>
          <div className="text-sm">
            <ul>
              {item?.lists?.map(link => (
                <li key={link.key}><a href={link.url} className="block mb-4 ">{link.title}</a></li>
              ))}
            </ul>
          </div>
          
        </div>
      ))}

      <div className="flex justify-start justify-items-center items-start content-start flex-col">
        <div className="tittle text-lg mb-6">Tasks</div>
        <div className="text-sm">
          优天辰官方出品
        </div>  
      </div>
    </div>
  );
}
